<template>
 <div>
  <el-carousel interval="1500" height="300px" type="card" direction="horizontal">
    <el-carousel-item v-for="item in bannerList" :key="item">
      <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
      <div justify="center" class="banner" :style="{backgroundImage:'url('+item.url+')'}">
        <!-- <img :src="item.url" :title="item.name" style="width:100%;height:100%;"/> -->        
      </div>
    </el-carousel-item>
  </el-carousel>
  <!-- 卡片 -->
  <el-row :gutter="20">
    <el-col v-for="item in cardList" :xs="24" :sm="12" :md="6" key="item.title">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.img" class="image" />
        <div style="padding: 14px">
          <span>{{item.title}}</span>
          <div class="bottom">
            <time class="time">{{ currentDate }}</time>
            <el-button text class="button">Operating</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
 </div>
</template>

<script>
export default {
 name: '',
 components:{},
 data() {
   return {
     bannerList:[
       {name:'banner01',url:require('@/assets/img/banner01.jpg')},
       {name:'banner02',url:require('@/assets/img/banner02.jpg')},
       {name:'banner03',url:require('@/assets/img/banner03.jpg')},
       {name:'banner04',url:require('@/assets/img/banner04.jpg')},
       {name:'banner05',url:require('@/assets/img/banner05.jpg')},
       {name:'banner06',url:require('@/assets/img/banner06.jpg')},
     ],
     cardList:[
       {title:'企业荣誉',img:require('@/assets/img/banner07.jpg')},
       {title:'成长之路',img:require('@/assets/img/banner08.jpg')},
       {title:'感恩有你',img:require('@/assets/img/banner06.jpg')},
       {title:'企业荣誉',img:require('@/assets/img/banner10.jpg')}
     ],
     currentDate:''
   }
 },
 created() {
   this.getCurrentDate()
 },
 computed: {
 },
 methods: {
   getCurrentDate(){
     let interval = setInterval(()=>{
      let date = new Date()
      let month = date.getMonth()
      month=month+1>9?month+1:'0'+(month+1)
      let day = date.getDate()>9?date.getDate():'0'+date.getDate()
      let hour = date.getHours()>9?date.getHours():'0'+date.getHours()
      let min = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes()
      let sec = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds()
      this.currentDate = date.getFullYear()+' - '+ month + ' - '+day + ' ' + hour + ':'+min+':'+sec    
      return this.currentDate
     },1000)     
   }
 },
}
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.banner{
  width:100%;
  height:100%;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/*卡片*/
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>